<template>
    <div class="my-title"><span>{{title}}</span></div>
</template>

<script>
    export default {
    	name: 'myTitle',
        props: ['title']
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .my-title {
        text-align: center;
        padding: pxToRem(60) 0;
        margin: auto;

        span {
            position: relative;
            font-size: pxToRem(40);
            color: $dark-grey;

            &:before {
                content: '';
                position: absolute;
                width: pxToRem(338);
                height: pxToRem(2);
                top: 50%;
                left: pxToRem(-350);
                background-color: $border-grey;
            }

            &:after {
                content: '';
                position: absolute;
                width: pxToRem(338);
                height: pxToRem(2);
                top: 50%;
                right: pxToRem(-350);
                background-color: $border-grey;
            }
        }
    }
</style>

















